<body>
  <div id="root"></div>
  <script type="module">
    import { h, render } from "../../../src/index.js";
    import { Component } from "./component.js";

    class Counter extends Component {
      state = 0;

      render() {
        return h(
          "h1",
          null,
          h("span", null, "Count #", this.props.label, ": ", this.state, " "),
          h("button", { onclick: () => this.setState(s => s + 1) }, "+"),
          h("button", { onclick: this.props.onRemove }, "Remove")
        );
      }
    }
    class App extends Component {
      state = [];
      counterId = 0;

      onAddCounter = () => {
        let nextId = ++this.counterId;
        this.setState(counters => counters.concat(nextId));
      };

      onRemoveCounter = counterId => () => {
        this.setState(counters => counters.filter(it => it !== counterId));
      };

      render() {
        return h(
          "div",
          null,
          h("button", { onclick: this.onAddCounter }, "Add Button"),
          h("hr"),
          this.state.map(counterId =>
            h(Counter, {
              label: counterId,
              onRemove: this.onRemoveCounter(counterId)
            })
          )
        );
      }
    }

    const root = document.getElementById("root");
    render(h(App), root);
  </script>
</body>
